<template>
    <!-- pages/meetingCreate/whiteName/whiteName.wxml -->
    <view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">指定名单</block>
		</cu-custom>
        <view class="box_5">
            <view class="group_2">
                <view class="box_6 flex align-center justify-between">
                    <text lines="1" :decode="true" class="paragraph_1">
                        *&nbsp;指定的手机号成员才能签到
                        <br />
                        *&nbsp;严格参考格式必须换行
                    </text>
                    <button @tap="onClick" class="litbtn" :plain="true">
                        <view class="image-text_1 flex align-center">
                            <image src="../../../static/import.png" class="importImage margin-right-xs" mode=""></image>
                            <text lines="1" class="text-group_1">导入导出</text>
                        </view>
                    </button>
                </view>
            </view>
            <view class="formcom">
                <textarea
                    class="paragraph_2 txt_word"
                    confirm-type="return"
                    placeholder="13866668888[姓名 公司等备注]\n13644447777[可备注]\n18633332222[]\n18933332222[]\n请输入"
                    maxlength="2000"
                    v-model="content"
                ></textarea>
            </view>
        </view>
        <button @tap="save" class="savebtn">
            <text lines="1" class="text_4">完成</text>
        </button>
    </view>
</template>

<script>
// pages/meetingCreate/whiteName/whiteName.js
export default {
    components: {},
    data() {
        return {
            content: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let data = JSON.parse(options.data).split(';;;');
		this.content = data.join('\n')
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        save() {
            let arrs = this.content.trim().split('\n');
            if (this.content == '' || arrs.length < 1) {
                uni.showToast({
                    title: '无效数据',
                    icon: 'error',
                    duration: 1200
                });
                return;
            }

            var hasError = false;
            arrs.some((item, index) => {
                var mobiles = item.match(/\d{11}/g);

                if (mobiles == null || mobiles.length < 1) {
                    uni.showToast({
                        title: '第' + (index + 1) + '行无效',
                        icon: 'error',
                        duration: 1200
                    });
                    hasError = true;
                    return true;
                }
            });

            if (hasError) {
                return;
            }

            try {
                this.$api.prePage().form.whiteList = arrs.join(';;;');
                uni.navigateBack();
            } catch (e) {
                console.log(e);
            }
        },

        onClick() {
            console.log('占位：函数 onClick 未声明');
        }
    }
};
</script>
<style>
/* pages/meetingCreate/whiteName/whiteName.wxss */
.page {
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}
.importImage{
	width: 24upx;
	height: 24upx;
}
.litbtn {
    width: auto !important;
    padding: 1rpx 30rpx !important;
    border-color: rgba(26, 117, 255, 1) !important;
    border-radius: 90rpx;
    height: 70rpx !important;
    margin-right: 0 !important;
}

.group_2 {
    background-color: rgba(255, 255, 255, 1);
    padding-top: 32rpx;
    display: flex;
    flex-direction: column;
}

.box_6 {
    padding: 10rpx 20rpx;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    padding-bottom: 40rpx;
}
.paragraph_1 {
    width: 360rpx;
    height: 80rpx;
    float: left;
    overflow-wrap: break-word;
    color: rgba(255, 0, 0, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 40rpx;
}

.button_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    border: 1px solid rgba(26, 117, 255, 1);
    display: flex;
    flex-direction: column;
    margin: 10rpx 0 10rpx 0;
    padding: 8rpx 22rpx 8rpx 22rpx;
}

.text-group_1 {
    overflow-wrap: break-word;
    color: rgba(26, 117, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 60rpx;
}

.button_2 {
    background-color: rgba(26, 117, 255, 1);
    margin-top: -2rpx;
    display: flex;
    flex-direction: column;
    padding: 24rpx 336rpx 22rpx 338rpx;
}

.text_4 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Semibold;
    text-align: center;
    white-space: nowrap;
    line-height: 50rpx;
}

.txt_word {
    word-wrap: break-word;
    white-space: pre-line;
}
.paragraph_2 {
    overflow-wrap: break-word;
    min-height: 800rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 40rpx;
    width: 100%;
}
.formcom {
    margin: 30rpx;
}
.savebtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 117, 255, 1);
    text-align: center;
    width: 100% !important;
    border-radius: 0;
}
</style>
